<template>
    <div class="answer" v-loading="loading">
        <div>
            <h3>筛选条件</h3>
            <div class="box">
                <div>
                    <el-input v-model="query.region" placeholder="通过答题ID筛选"></el-input>
                </div>
                <div>
                    <el-input v-model="query.region" placeholder="通过用户ID筛选"></el-input>
                </div>
                <div>
                    <el-input v-model="query.region" placeholder="通过题目ID筛选"></el-input>
                </div>
                <div>
                    <el-select v-model="query.region" placeholder="通过语言筛选">
                        <el-option label="Java" :value="1"></el-option>
                        <el-option label="JavaScript" :value="2"></el-option>
                    </el-select>
                </div>
                <div>
                    <el-button icon="el-icon-search"
                     type="primary">查询</el-button>
                </div>
                <div>
                    <el-button icon="el-icon-refresh"
                     type="primary">重置</el-button>
                </div>
                <div>
                    <el-button icon="el-icon-download" 
                         type="primary" @click="exportExcel">导出</el-button>
                </div>
            </div>
        </div>
        <div>
            <adminAnswerItemTable :list="data.list"/>
        </div>
        <div class="footer-pagination" v-if="data.page">
            <el-pagination
            @size-change="i => this.getData(limit = i)"
            @current-change="i => this.getData(page = i)"
            :current-page="page"
            :page-sizes="limits"
            :page-size="limit"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.page.total">
            </el-pagination>
        </div>

        
    </div>
</template>

<script>
    import { getAnswerItemList, exportExcelAnswerItemList } from '@/api/answerItem'
    import adminAnswerItemTable from './components/adminAnswerItemTable.vue'
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                data : [],
                query : {},
                page : 1,
                limit : 10,
                loading : false
            }
        },
        components : {
            adminAnswerItemTable
        },
        computed : {
            ...mapState(['limits']),
        },
        created(){
            this.limit = this.limits[0]
            this.getData()
        },
        methods : {
            getData(){
                this.loading = true
                this.query.limit = this.limit
                this.query.page = this.page
                this.query.isUser = 1
                getAnswerItemList(this.query).then(res => {
                    this.loading = false
                    if(res.code == 200){
                        this.data = res.data
                    }
                })
            },
            handleDetele(){

            },
            exportExcel(){
                this.query.limit = this.limit
                this.query.page = this.page
                this.query.isUser = 1
                exportExcelAnswerItemList(this.query).then(res => {
                    if(res.status == 200){
                        var blob = new Blob([res.data])
                        var downloadElement = document.createElement('a', 'application/vnd.ms-excel');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href
                        downloadElement.download = '数据.xlsx'; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
.answer{
    &>div{
        padding: 10px;
        background-color: #fff;
        margin: 10px 0;
        border-radius: 10px;
        .box{
            margin: 10px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            &>div{
                margin: 5px;
                max-width: 40%;
            }
        }
    }
    .footer-pagination{
        display: flex;
        justify-content: end;
    }
}
</style>